<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="800px">
     <template v-slot:title>
        <div class="dialog-title">
          <div>{{title}}</div>
          <div class="dialog-btn cursor iconfont" :class="[isDialogShow ? 'icon-yanjing': 'icon-biyan']" @click="handleClickDialogIsShow"></div>
        </div>
      </template>
    <el-form ref="editFormRef" v-if="dialogVisible" :model="editForm" :rules="rules" size="small">
      <el-form-item label="学校名称" :label-width="labelWidth" prop="schoolName" class="line">
        <el-input v-model="schoolName" auto-complete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="学校编码" :label-width="labelWidth" prop="schoolUnicode" class="line">
        <el-input v-model="schoolUnicode" auto-complete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="校区名称" :label-width="labelWidth" prop="name" class="line">
        <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入校区名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="校区简称" :label-width="labelWidth" prop="shortName" class="line">
        <el-input v-model="editForm.shortName" auto-complete="off" placeholder="请输入校区简称" clearable></el-input>
      </el-form-item>
      <el-form-item label="校区地址" :label-width="labelWidth" prop="address" class="line">
        <el-input v-model="editForm.address" auto-complete="off" placeholder="请输入校区地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="校区邮政编码" :label-width="labelWidth" prop="postCode" class="line">
        <el-input v-model="editForm.postCode" auto-complete="off" placeholder="请输入校区邮政编码" clearable></el-input>
      </el-form-item>
      <el-form-item label="联系人" :label-width="labelWidth" prop="contact" class="line">
        <el-input v-model="editForm.contact" auto-complete="off" placeholder="请输入联系人" clearable></el-input>
      </el-form-item>
      <el-form-item label="校区负责人" :label-width="labelWidth" prop="masterName" class="line">
        <el-input v-model="editForm.masterName" auto-complete="off" placeholder="请输入校区负责人" clearable></el-input>
      </el-form-item>
      <el-form-item label="联系方式" :label-width="labelWidth" prop="contactWay" class="line">
        <Acc-desensitization ref="cellularPhone" rule-type='cellularPhone' v-model="editForm.contactWay"></Acc-desensitization>
      </el-form-item>
      <el-form-item label="电子邮箱" :label-width="labelWidth" prop="email" class="line">
        <el-input v-model="editForm.email" auto-complete="off" placeholder="请输入电子邮箱" clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="hanldeSave('editFormRef')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { addSchoolAreaInfo, updateSchoolAreaInfo, getSchool } from '@/views/children/basic/js/schoolAreaInfo'
import pick from 'lodash.pick'
import { USER_INFO } from '@/views/children/workOrder/js/constants'
// import moment from 'moment'
export default {
  name: 'schoolAreaInfoModal',
  data () {
    return {
      isDialogShow: true,
      tenantNo: Vue.ls.get(USER_INFO).tenantNo,
      title: '新增校区',
      isAdd: false,
      disabled: false,
      dialogVisible: false,
      labelWidth: '120px',
      schoolName: '',
      schoolUnicode: '',
      editForm: {
        schoolName: '',
        schoolUnicode: '',
        name: '',
        shortName: '',
        address: '',
        postCode: '',
        contact: '',
        masterName: '',
        contactWay: '',
        email: ''
      },
      model: {},
      rules: {
        name: [{ required: true, validator: this.validateName }],
        address: [{ required: true, validator: this.validateAddress }],
        contact: [{ required: true, validator: this.validateContact }],
        contactWay: [{ required: true, validator: this.validateContactWay }],
        email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
      },
      roleList: [],
      userList: [],
      dealImgUrl: []
    }
  },
  props: {},
  computed: {},
  filters: {},
  mounted () {
    this.getSchool()
  },
  methods: {
    handleClickDialogIsShow () {
      this.isDialogShow = !this.isDialogShow
      this.$refs.cellularPhone.doShow()
    },
    add () {
      this.edit({})
    },
    edit (record) {
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        if (record.id) {
          this.title = '修改校区'
          this.editForm = pick(this.model, 'schoolName', 'schoolUnicode', 'name', 'shortName', 'address', 'postCode', 'contact', 'masterName', 'contactWay', 'email')
        } else {
          this.title = '新增校区'
          this.editForm = {}
          // this.editForm.insideNotice = 0
          // this.editForm.mobileNotice = 0
        }
      })
      this.dialogVisible = true
    },
    // 提交表单
    hanldeSave (editFormRef) {
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          let res, msg
          const values = {
            name: this.editForm.name || '',
            shortName: this.editForm.shortName || '',
            address: this.editForm.address || '',
            postCode: this.editForm.postCode || '',
            contact: this.editForm.contact || '',
            masterName: this.editForm.masterName || '',
            contactWay: this.editForm.contactWay || '',
            email: this.editForm.email || ''
          }
          if (!this.model.id) {
            res = await addSchoolAreaInfo(Object.assign({}, values))
            msg = '保存成功！'
          } else {
            res = await updateSchoolAreaInfo(Object.assign({}, values, { id: this.model.id }))
            msg = '修改成功！'
          }
          if (res.code === 0) {
            this.$message.success(msg)
          } else {
            this.$message.warning(res.msg)
          }
          this.$emit('ok')
          this.handleCancel()
        }
      })
    },
    async getSchool () {
      let res = await getSchool({})
      this.schoolName = res.data[0].name
      this.schoolUnicode = res.data[0].unicode
    },
    handleCancel () {
      this.model = {}
      this.$refs.editFormRef.resetFields()
      this.$nextTick(() => {
        this.dialogVisible = false
      })
    },
    strlen (str) {
      var len = 0
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i)
        // 单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          len++
        } else {
          len += 2
        }
      }
      return len
    },
    validateName (rule, value, callback) {
      if (value) {
        if (value.toString().trim() === '') {
          callback(new Error('请输入校区名称'))
        } else if (this.strlen(value) > 30) {
          callback(new Error('校区名称不能超过30个字符'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入校区名称'))
      }
    },
    validateAddress (rule, value, callback) {
      if (value) {
        if (value.toString().trim() === '') {
          callback(new Error('请输入校区地址'))
        } else if (this.strlen(value) > 30) {
          callback(new Error('校区地址不能超过30个字符'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入校区地址'))
      }
    },
    validateContact (rule, value, callback) {
      if (value) {
        if (value.toString().trim() === '') {
          callback(new Error('请输入联系人'))
        } else if (this.strlen(value) > 30) {
          callback(new Error('联系人名称不能超过30个字符'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入联系人'))
      }
    },
    validateContactWay (rule, value, callback) {
      if (value) {
        if (value.toString().trim() === '') {
          callback(new Error('请输入联系方式'))
        } else if (this.strlen(value) > 30) {
          callback(new Error('联系方式不能超过30个字符'))
        } else {
          console.log(value)
          let patter = /^((0\d{2,3}-\d{7,8})|(1[3576849]\d{9}))$/
          if (!patter.test(value.trim())) {
            callback(new Error('请输入正确的联系方式'))
          } else {
            callback()
          }
        }
      } else {
        callback(new Error('请输入联系方式'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 25px;

  .dialog-btn {
    font-size: 18px;
  }
}
.dialog-footer {
  text-align: right;
}

/deep/ .el-rate__item {
  padding-top: 5px;
  .el-rate__icon {
    font-size: 22px;
  }
}
/deep/ .img-over {
  margin-right: 5px;
  width: 60px;
  height: 45px;
  cursor: pointer;
}
/deep/ .viewer-container {
  z-index: 3000 !important;
}
.line{
  display: inline-block;
  width: 350px;
}
</style>
